<template>
  <div class="container">
    <nav>
      <p>校园安全风险防控数字化改造</p>
    </nav>
    <section>
      <div class="left">
        <div class="title">基本情况</div>
        <div class="school-box">
          <div class="school-item">
            <div class="sc-top" v-if="infoData">
              <span>{{ infoData.schoolQuantity[0].typeSize }}</span>
              <span>个</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/sc1.png" alt="" />
              <p>小学校</p>
            </div>
          </div>
          <div class="school-item">
            <div class="sc-top" v-if="infoData">
              <span>{{
                  infoData.schoolQuantity[1].typeSize +
                  infoData.schoolQuantity[2].typeSize
                }}</span>
              <span>个</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/sc2.png" alt="" />
              <p>中学校</p>
            </div>
          </div>
          <div class="school-item">
            <div class="sc-top" v-if="infoData">
              <span>{{ infoData.schoolQuantity[3].typeSize }}</span>
              <span>个</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/sc3.png" alt="" />
              <p>九年一贯制</p>
            </div>
          </div>
        </div>
        <div class="bottom-line"></div>
        <div class="ab-box">
          <div class="ab-item" v-if="infoData">
            <img src="@/assets/dp/images/police.png" alt="" />
            <p>
              安保人数(人)：<span
              style="
                  font-size: 24px;
                  font-family: DOUYU;
                  font-weight: normal;
                  color: #2ec4e4;
                "
            >{{ infoData.numberOfSecurityPersonnel }}</span
            >
            </p>
          </div>
          <div class="ab-item" v-if="infoData">
            <!-- <img src="@/assets/images/bar.png" alt="" /> -->
            <pieCharts :num="pieNum" />
            <p>
              证照上传率：<span
              style="
                  font-size: 24px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffc61e;
                "
            >{{ Math.ceil(infoData.licenseHoldingRate * 100) + "%" }}</span
            >
            </p>
          </div>
        </div>
        <div class="bottom-line"></div>
        <div class="man-box">
          <div class="man-item">
            <div class="sc-top" v-if="infoData">
              <span>{{ infoData.administrativeStaff }}</span>
              <span>人</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/man1.png" alt="" />
              <p>行政人员（人）</p>
            </div>
          </div>
          <div class="man-item">
            <div class="sc-top" v-if="infoData">
              <span>{{ infoData.headOfSecurity }}</span>
              <span>人</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/man2.png" alt="" />
              <p>安全责任人（人）</p>
            </div>
          </div>
          <div class="man-item">
            <div class="sc-top" v-if="infoData">
              <span>{{ infoData.securityEquipment }}</span>
              <span>套</span>
            </div>
            <div class="sc-bottom">
              <img src="@/assets/dp/images/man3.png" alt="" />
              <p>安防器械(套）</p>
            </div>
          </div>
        </div>
        <div class="bottom-line"></div>
        <div class="title">一键报警</div>
        <div style="overflow: hidden; height: 296px">
          <el-table
            :data="tableDataNull"
            style="width: 420px; margin: auto; z-index: 999;" :header-cell-style="{color: '#a1c2e7' ,background:'#163F78'}"
          >
            <el-table-column prop="id" label="终端ID"> </el-table-column>
            <el-table-column prop="name" label="终端名称"> </el-table-column>
            <!-- <el-table-column prop="type" label="终端类型"> </el-table-column> -->
            <el-table-column prop="status" label="状态" width="60">
            </el-table-column>
            <el-table-column prop="zz" label="所属组织" align="center">
            </el-table-column>
            <el-table-column prop="address" label="IP地址"> </el-table-column>
            <!-- <el-table-column prop="level" label="终端级别"> </el-table-column> -->
          </el-table>
          <vueSeamlessScroll :data="tableData1" :class-option="classOption">
            <el-table
              :data="tableData1"
              style="width: 420px; margin: auto"
              :show-header="false"
            >
              <el-table-column prop="id" label="终端ID"> </el-table-column>
              <el-table-column prop="name" label="终端名称"> </el-table-column>
              <!-- <el-table-column prop="type" label="终端类型"> </el-table-column> -->
              <el-table-column prop="status" label="状态" width="60">
              </el-table-column>
              <el-table-column prop="zz" label="所属组织" align="center">
              </el-table-column>
              <el-table-column prop="address" label="IP地址"> </el-table-column>
              <!-- <el-table-column prop="level" label="终端级别"> </el-table-column> -->
            </el-table>
          </vueSeamlessScroll>
        </div>
      </div>
      <div class="center">
        <mapChart />
        <div class="title">巡查记录</div>
        <div class="center-bottom">
          <el-table
            v-if="false"
            :data="tableDataNull"
            style="width: 941px; margin: auto; z-index: 999 ;color: #a1c2e7" :header-cell-style="{color: '#a1c2e7' ,background:'#163F78'}"
          >
            <el-table-column prop="name" label="学校"> </el-table-column>
            <el-table-column prop="line_name" label="线路"> </el-table-column>
            <el-table-column prop="group_name" label="安保小组">
            </el-table-column>
            <el-table-column prop="date" label="时间"> </el-table-column>
            <el-table-column prop="address" label="状态" width="60">
              <template slot-scope="scope">
                {{ scope.row.patrol_result === 0 ? "正常" : "异常" }}
              </template>
            </el-table-column>
          </el-table>
          <vueSeamlessScroll :data="tableData" :class-option="classOption1">
            <el-table
              :data="tableData"
              style="width: 941px; margin: auto; color: #a1c2e7"
              :header-cell-style="{background:'#163F78'}"
              :show-header="false"
              @row-click="handelDetail"

            >
              <el-table-column prop="name" label="学校"> </el-table-column>
              <el-table-column prop="line_name" label="线路"> </el-table-column>
              <el-table-column prop="group_name" label="安保小组">
              </el-table-column>
              <el-table-column prop="date" label="时间"> </el-table-column>
              <el-table-column prop="address" label="状态" width="60">
                <template slot-scope="scope">
                  <span
                    :style="{
                      color: scope.row.patrol_result === 0 ? '#fff' : 'red',
                    }"
                  >
                    {{ scope.row.patrol_result === 0 ? "正常" : "异常" }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </vueSeamlessScroll>
        </div>
      </div>
      <div
        class="right"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
      >
        <div class="title">
          <span>学校监控</span>
          <el-button type="text" @click="update">刷新</el-button>
        </div>
        <div class="jk-box">
          <div
            class="jk-item"
            v-for="(item, index) in monitorData"
            :key="index"
          >
            <div :id="'video-container' + (index + 1)"></div>
            <p> </p>
          </div>
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="monitorList"
          :header-cell-style="{color: '#a1c2e7' ,background:'#163F78'}"
          layout="  prev, pager, next"
        />
      </div>
    </section>
    <patrolRoutes
      v-if="dialogVisible"
      :dialogVisible.sync="dialogVisible"
      :patruldetail="patruldetail"
      :schoolName="schoolName"
      :lineName="lineName"
    />
  </div>
</template>

<script>
import mapChart from "@/components/Dp/mapChart";
import EZUIKit from "@/assets/dp/ezuikit.js";
import pieCharts from "@/components/Dp/pieChart.vue";

import {
  getInfo,
  patrulhaList,
  getLinklist,
  monitorList,
} from "@/api/patrol/dp.js";

import vueSeamlessScroll from "vue-seamless-scroll";
import patrolRoutes from "./patrolRoutes";

export default {
  components: { mapChart, vueSeamlessScroll, patrolRoutes, pieCharts },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
      pieNum: 0,
      tableDataNull: [],
      tableData: [],
      tableData1: [
        {
          id: "133",
          name: "春晖幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "208",
          name: "江山名门幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "327",
          name: "北大资源鲤鱼池小学",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "183",
          name: "三色幼儿园（上格林）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "158",
          name: "华新实验学校福宁村",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "237",
          name: "娃呵呵南桥幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "168",
          name: "城市印象幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "311",
          name: "新村实验小学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "172",
          name: "莱恩贝观府国际幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "190",
          name: "五里店蓝色经典幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "182",
          name: "万丰好时光幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "171",
          name: "金色摇篮幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "162",
          name: "南阳春翼幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "180",
          name: "金科荟萃幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "141",
          name: "新村实验校附嘉华幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "185",
          name: "巴蜀城幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "111",
          name: "童话世家幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "280",
          name: "华渝实验学校（东区）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "165",
          name: "福宁幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "145",
          name: "鸿恩怡园幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "125",
          name: "新都会幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "273",
          name: "十八中两江实验中学",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "175",
          name: "乐融幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "127",
          name: "生生幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "216",
          name: "港兴幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "265",
          name: "字水中学校（东区）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "203",
          name: "康兴幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "283",
          name: "鸿恩实验学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "262",
          name: "十八中铁区后门",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "134",
          name: "巴蜀（华立）幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "239",
          name: "开心宝贝幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "212",
          name: "四叶草桔幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "191",
          name: "立顿珠江幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "186",
          name: "三之三太阳城幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "268",
          name: "二0三中学校（高中部）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "116",
          name: "方圆心幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "163",
          name: "赛江名都幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "160",
          name: "璞蕾幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "287",
          name: "复盛实验学校（小学）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "150",
          name: "商业局幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "201",
          name: "洋河小学附属三溪幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "196",
          name: "博越幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "116",
          name: "科技小学附属幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "310",
          name: "华新实验小学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "253",
          name: "金果儿幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "220",
          name: "七巧板幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "164",
          name: "蓝天幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "166",
          name: "园金砂幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "267",
          name: "二0三中学校(初中部)",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "204",
          name: "星辰金阳幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "206",
          name: "中忆新村幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "131",
          name: "荟萃幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "240",
          name: "新村,新意境幼雅园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "264",
          name: "字水中学校 (西区)",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "247",
          name: "辰星幼儿园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "308",
          name: "鲤鱼池小学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "199",
          name: "港城幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "302",
          name: "蜀都小学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "130",
          name: "生生森林幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "284",
          name: "寸滩实验学校",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "276",
          name: "诚善中学",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "113",
          name: "三色长安三园",
          type: "面板",
          status: "在线",
          zz: "主控中心",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "213",
          name: "载英幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "279",
          name: "五宝实验校（小学部）",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.113",
          level: "本级",
        },
        {
          id: "144",
          name: "爱丁书香幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "314",
          name: "雨花小学",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
        {
          id: "256",
          name: "大川爱弥儿幼儿园",
          type: "面板",
          status: "在线",
          zz: "学校",
          address: "192.168.1.11",
          level: "本级",
        },
      ],
      infoData: null,
      dialogVisible: false,
      patruldetail: null,
      schoolName: null,
      lineName: null,
      monitorData: [],
      total: 0,
      time: 0,
      loading: false,
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500, // 单步运动停止的时间(默认值1000ms)
      };
    },
    classOption1() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    this.getInfo();
    this.getPatrulhaList();
    this.monitorList();
    this.tableData1.forEach(res=>{
      // 获取前两个字符和后两个字符
      const start = res.name.slice(0, 2);
      const end = res.name.slice(-2);
      // 计算中间部分长度并替换为*
      const middleLength = res.name.length - 4;
      const middle = '*'.repeat(middleLength);
      res.name = start + middle + end;
    })
  },
  mounted() {},
  methods: {
    monitorList() {
      this.loading = true;

      this.time = 0;
      if (this.monitorData.length) {
        this.monitorData.map((item, index) => {
          document.getElementById(`video-container${index + 1}-wrap`).html = "";
          window["player" + (index + 1)].stop();
        });
      }
      monitorList(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.monitorData = res.rows;
          this.total = res.total;
          this.videoPlayer();
        }
      });
    },
    videoPlayer() {
      this.monitorData.map((item, index) => {
        // window["player" + (index + 1)] = null;
        var player = new EZUIKit.EZUIKitPlayer({
          id: "video-container" + (index + 1), // 视频容器ID
          accessToken: item.token,
          url: item.url,
          audio: 0,
          // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
          // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
          template: "voice", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
          width: 213,
          height: 160,
          handleSuccess: () => {
            this.time++;
            if (this.monitorData.length == this.time) {
              this.loading = false;
            }
          },
          handleError: () => {
            this.time++;
            if (this.monitorData.length == this.time) {
              this.loading = false;
            }
          },
        });
        window["player" + (index + 1)] = player;
      });
    },
    getInfo() {
      getInfo().then((res) => {
        if (res.code === 200) {
          this.infoData = res.data;
          this.pieNum = res.data.licenseHoldingRate * 100;
        }
      });
    },
    getPatrulhaList() {
      patrulhaList().then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    handelDetail(row, column, event) {
      this.schoolName = row.name;
      this.lineName = row.line_name;
      this.getLinklist(row.id);
    },
    getLinklist(id) {
      getLinklist(id).then((res) => {
        if (res.code === 200) {
          this.patruldetail = res.data;
          this.dialogVisible = true;
        }
      });
    },
    update() {
      this.monitorList();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__empty-block {
  display: none;
}

::v-deep .el-table th.el-table__cell {
  background: #083f79 ;
  font-size: 16px ;
  font-family: Microsoft YaHei ;
  font-weight: 400 ;
  color: #a1c2e7 ;
}
::v-deep .el-table tr:nth-of-type(odd) {
  background: #04254a ;
  font-size: 16px ;
  font-family: Microsoft YaHei !important;
  font-weight: 400 ;
  color: #a1c2e7 ;
}
::v-deep .el-table tr:nth-of-type(even) {
  background: #021a38;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #a1c2e7;
}
::v-deep .el-table {
  background: #083f79;
}
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  cursor: pointer;
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid rgba(255, 255, 255, 0) !important;
}
::v-deep
.el-table--enable-row-hover
.el-table__body
tr:hover
> td.el-table__cell {
  background: #0a498c;
}


.bottom-line {
  width: 378px;
  height: 1px;
  background: #000000;
  border: 1px solid #79c2ff;
  opacity: 0.2;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.container {
  width: 100vw;
  height: 1080px;
  background: url("~@/assets/dp/images/bg.png");
  background-size: 100% 100%;
  nav {
    width: 100vw;
    height: 109px;
    background: url("~@/assets/dp/images/bt.png");
    background-size: 100% 100%;
    position: absolute;
    p {
      font-size: 46px;
      font-family: DOUYU;
      font-weight: normal;
      color: #ffffff;
      text-align: center;
      padding-top: 10px;
      background: linear-gradient(0deg, #74b7ff 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  section {
    padding: 0 10px;
    padding-top: 86px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 448px;
      height: 987px;
      background: url("~@/assets/dp/images/left-bg.png");
      background-size: 100% 100%;
      .title {
        height: 60px;
        background: url("~@/assets/dp/images/bt-bg.png");
        background-size: 100% 100%;
        font-size: 24px;
        font-family: DOUYU;
        font-weight: normal;
        color: #ffffff;
        line-height: 60px;
        padding-left: 60px;
      }
      .school-box {
        display: flex;
        justify-content: space-between;
        padding: 0 32px;
        margin-top: 32px;
        .school-item {
          width: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .sc-top {
            font-size: 24px;
            font-family: DOUYU;
            font-weight: normal;
            color: #e5c564;
            span:nth-of-type(1) {
              font-size: 24px;
            }
            span:nth-of-type(2) {
              font-size: 14px;
            }
          }
          .sc-bottom {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            img {
              width: 98px;
              height: 76px;
            }
            p {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #a1c2e7;
            }
          }
        }
      }
      .ab-box {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .ab-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          img {
            width: 110px;
            height: 104px;
          }
          p {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #a1c2e7;
          }
        }
      }
      .man-box {
        display: flex;
        justify-content: space-between;
        padding: 0 32px;
        margin-top: 32px;
        .man-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          .sc-top {
            span {
              font-size: 24px;
              font-family: DOUYU;
              font-weight: normal;
              color: #63aaf8;
            }
          }
          .sc-bottom {
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            img {
              width: 80px;
              height: 100px;
            }
            p {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #a1c2e7;
            }
          }
        }
      }
    }
    .center {
      flex: 1;
      // background: url("@/assets/images/center-bg.png");
      // background-size: 100% 100%;
      padding: 0 10px;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      position: relative;
      .center-bottom {
        position: absolute;
        bottom: 0;
        margin: auto;
        left: 3%;
        height: 330px;
        overflow: hidden;
      }
      .title {
        position: absolute;
        bottom: 35%;
        left: 43%;
        font-size: 22px;
        color: #63aaf8;
        font-family: DOUYU;
      }
    }
    .right {
      width: 448px;
      height: 987px;
      background: url("~@/assets/dp/images/left-bg.png");
      background-size: 100% 100%;
      .title {
        height: 60px;
        background: url("~@/assets/dp/images/bt-bg.png");
        background-size: 100% 100%;
        font-size: 24px;
        font-family: DOUYU;
        font-weight: normal;
        color: #ffffff;
        line-height: 60px;
        padding-left: 60px;
        display: flex;
        justify-content: space-between;
        padding-right: 30px;
      }
      .jk-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 22px 10px 0;
        .jk-item {
          // width: 213px;
          // height: 160px;
          cursor: pointer;
        }
        p {
          margin: 10px auto;
          color: #fff;
          text-align: center;
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
